<template>
  <div class="progress-step_container" :style="containerStyle">
    <ProgressStep ref="progressStep" :data="data"></ProgressStep>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import ProgressStep from '@/components/ProgressStep/ProgressStep.vue'

const data = [
  { status: 'completed', title: '开始', description: '这是描述' },
  [
    [
      { status: 'completed', title: '已完成', description: '这是描述' },
      { status: 'completed', title: '已完成', description: '这是描述' },
      [
        [
          { status: 'completed', title: '已完成', description: '这是描述' },
          { status: 'pending', title: '待处理', description: '这是描述' }
        ],
        [
          { status: 'completed', title: '已完成', description: '这是描述' },
          { status: 'processing', title: '处理中', description: '这是描述' }
        ]
      ],
      { status: 'pending', title: '待处理', description: '这是描述' }
    ],
    [
      { status: 'completed', title: '已完成', description: '这是描述' },
      { status: 'completed', title: '已完成', description: '这是描述' },
      [
        [
          { status: 'completed', title: '已完成', description: '这是描述' },
          { status: 'pending', title: '待处理', description: '这是描述' }
        ],
        [
          { status: 'completed', title: '已完成', description: '这是描述' },
          { status: 'processing', title: '处理中', description: '这是描述' }
        ]
      ],
      { status: 'pending', title: '待处理', description: '这是描述' }
    ]
  ],
  { status: 'pending', title: '结束', description: '这是描述' }
]
// ref引用子组件元素
const progressStep: any = ref(null)

const containerStyle = reactive({
  height: 'auto'
})
onMounted(() => {
  const { reactHeight, parallelNodesLen } = progressStep.value
  if (parallelNodesLen) containerStyle.height = reactHeight * 2.5 + 'px'
})
</script>

<style lang="less" scoped>
.progress-step_container {
  display: flex;
  align-items: center;
  overflow-x: auto;
}
</style>
